import React, { memo,useEffect,useRef } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import { Carousel } from 'antd';
import XJDThemeHeaderRCM from "@/components/theme-header-rcm" 
// import {getNewAlbums} from "@/services/recommend"
import {getNewAlbumAction} from "../../store/actionCreators"
import XJDAlbumCover from "@/components/album-cover"
import { AlbumWrapper } from './style';
export default memo(function XJDNewAlbum() {
//   const [albums,setAlbums]=useState([])
// useEffect(()=>{
// getNewAlbums(10).then(res=>{
//   // console.log(res)
//   setAlbums(res.albums)
// })
// },[])
const {newAlbums}=useSelector(state=>({
  newAlbums:state.getIn(["recommend", "newAlbums"])
}),shallowEqual)

const pageRef = useRef();

const  dispatch=useDispatch()
useEffect(()=>{
dispatch(getNewAlbumAction(10))
},[dispatch])

  return (
    <AlbumWrapper>
      <XJDThemeHeaderRCM title="新碟上架"/>
      <div className="content">

      <button className="arrow arrow-left sprite_02" 
                onClick={e => pageRef.current.prev()}></button>
        <div className="album">
          <Carousel dots={false} ref={pageRef}>
            {
              [0, 1].map(item => {
                return (
                  <div key={item} className="page">
                    {
                      newAlbums.slice(item * 5, (item + 1) * 5).map(iten => {
                        return <XJDAlbumCover key={iten.id} 
                                             info={iten} 
                                             size={100} 
                                             width={118} 
                                             bgp="-570px"/>
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
        <button className="arrow arrow-right sprite_02"
                onClick={e => pageRef.current.next()}></button>
        {/* {
          // // albums.map((item,index)=>{
          // //   return <div>{item.name}</div>
          // // })
          // newAlbums.map((item,index)=>{

          // })
          


        } */}
      </div>
    </AlbumWrapper>
  )
})
